<template>
    <div class="app-container">
        <el-row :gutter="20">
            <!--企业数据-->
            <el-col :span="4" :xs="24">
                <div class="head-container">
                    <el-input v-model="deptName" placeholder="请输入名称" clearable size="small" prefix-icon="el-icon-search"
                        style="margin-bottom: 20px" />
                </div>
                <div class="head-containers">
                    <el-tree :data="areaOptions" :props="defaultProps" :expand-on-click-node="false"
                        :filter-node-method="filterNode" ref="tree" node-key="id" default-expand-all highlight-current
                        @node-click="handleNodeClick" />
                </div>
            </el-col>
            <!--小区数据-->
            <el-col :span="20" :xs="24">
                <el-card class="box-card">
                    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
                        label-width="68px">
                        <el-form-item label="客户类型" prop="customerType">

                            <!-- <el-select v-model="queryParams.customerType" placeholder="客户类型" clearable style='width:100%'>
                                <el-option key="" label="全部" value="" />
                                <el-option key="1" label="民用" value="1" />
                                <el-option key="2" label="商用" value="2" />
                                <el-option key="3" label="公用" value="3" />
                            </el-select> -->
                            <el-select v-model="queryParams.customerType" filterable placeholder="请选择" style="width: 150px">
                                <el-option v-for="dict in dict.type.customer_type" :key="dict.value" :label="dict.label"
                                    :value="dict.value" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="客户名称" prop="customerName">
                            <el-input v-model="queryParams.customerName" placeholder="请输入客户名称" clearable
                                style="width: 150px" />
                        </el-form-item>
                        <el-form-item label="客户编码" prop="customerCode">
                            <el-input v-model="queryParams.customerCode" placeholder="请输入客户编码" clearable
                                style="width: 150px" />
                        </el-form-item>
                        <el-form-item label="表号" prop="meterCode">
                            <el-input v-model="queryParams.meterCode" placeholder="请输入表号" clearable style="width: 150px" />
                        </el-form-item>
                        <!-- <el-form-item label="所属小区" prop="areaId">
                            <treeselect v-model="queryParams.areaId" :options="areaOptions" :show-count="true"
                                placeholder="请选择所属小区" style="width: 150px" />
                        </el-form-item> -->
                        <el-form-item label="起止时间" prop="openDate">
                            <el-date-picker v-model="queryParams.openDate" type="daterange" range-separator="至"
                                start-placeholder="开始日期" end-placeholder="结束日期" @change="serchTime"
                                value-format="yyyy-MM-dd" clearable>
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                        </el-form-item>
                    </el-form>
                    <el-card class="box-card">
                        <div class="head_box">
                            <div v-for="(item, index) in headList" :key="index" class="head_box_value">
                                <img :src="item.url" alt="" class="head_box_img">
                                <span>{{ item.name }}：</span>
                                <span>{{ item.value }}</span>
                            </div>
                        </div>
                    </el-card>
                    <el-row :gutter="10" class="mb8" style="margin-top:20px">
                        <el-col :span="1.5">
                            <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
                                v-hasPermi="['meter:log:export']">导出</el-button>
                        </el-col>
                        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
                    </el-row>

                    <el-table v-loading="loading" :data="userList" border>
                        <el-table-column type="selection" width="50" align="center" />
                        <el-table-column label="用气金额(元)" align="center" key="useAmount" prop="useAmount"
                            :show-overflow-tooltip="true" width="100" />
                        <el-table-column label="用气量" align="center" key="useGas" prop="useGas" :show-overflow-tooltip="true"
                            width="150" />
                        <el-table-column label="客户名称" align="center" key="customerName" prop="customerName"
                            :show-overflow-tooltip="true" />
                        <el-table-column label="客户编码" align="center" key="customerCode" prop="customerCode"
                            :show-overflow-tooltip="true" />
                        <el-table-column label="表号" align="center" key="meterCode" prop="meterCode"
                            :show-overflow-tooltip="true" width="120" />
                        <el-table-column label="客户类型" align="center" key="customerType" prop="customerType"
                            :show-overflow-tooltip="true">
                            <template slot-scope="scope">
                                <span v-if="scope.row.customerType == 'INDUSTRAIL'">工业</span>
                                <span v-if="scope.row.customerType == 'BUSINESS'">商用</span>
                                <span v-if="scope.row.customerType == 'CIVIL'">民用</span>
                            </template>
                        </el-table-column>

                        <el-table-column label="表端总购" align="center" key="meterTotalAmount" prop="meterTotalAmount"
                            :show-overflow-tooltip="true" width="100" />

                        <el-table-column label="表端余额" align="center" key="meterBlance" prop="meterBlance"
                            :show-overflow-tooltip="true" width="100" />

                        <el-table-column label="表端总用气量" align="center" key="meterTotalGas" prop="meterTotalGas"
                            :show-overflow-tooltip="true" width="100" />

                        <el-table-column label="证件号" align="center" key="idNumber" prop="idNumber"
                            :show-overflow-tooltip="true" width="100" />
                        <el-table-column label="采集日期" align="center" key="createTime" prop="createTime"
                            :show-overflow-tooltip="true" />
                        <el-table-column label="联系电话" align="center" key="telephone" prop="telephone"
                            :show-overflow-tooltip="true" />

                        <el-table-column label="表运行状态" align="center" key="totalVolume" prop="totalVolume"
                            :show-overflow-tooltip="true" width="120" />
                        <el-table-column label="片区名称" align="center" key="areaName" prop="areaName"
                            :show-overflow-tooltip="true" width="150" />
                        <!-- <el-table-column label="片区ID" align="center" key="areaId" prop="areaId"
                            :show-overflow-tooltip="true" /> -->
                        <!--<el-table-column label="用气量(m3)" align="center" key="building" prop="building"
                            :show-overflow-tooltip="true" width="100" />-->

                        <el-table-column label="阀门状态" align="center" key="valveStatus" prop="valveStatus"
                            :show-overflow-tooltip="true">
                            <template slot-scope="scope">
                                <span v-if="scope.row.customerType == '0'">关闭</span>
                                <span v-if="scope.row.customerType == '1'">开启</span>
                                <span v-if="scope.row.customerType == '2'">未知</span>
                            </template>
                        </el-table-column><el-table-column label="表计状态" align="center" key="meterStatus" prop="meterStatus"
                            :show-overflow-tooltip="true">
                            <template slot-scope="scope">
                                <span v-if="scope.row.customerType == '1'">待安装</span>
                                <span v-if="scope.row.customerType == '2'">正常</span>
                                <span v-if="scope.row.customerType == '3'">已拆卸</span>
                            </template>
                        </el-table-column>

                    </el-table>

                    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
                        :limit.sync="queryParams.pageSize" @pagination="getList" />
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>
  
<script>

import { useGasList, useGasListAll } from "@/api/report/useGas.js"
import { areaTreeList } from "@/api/fileManagement/areainfo.js"
import { deptTreeSelect, } from "@/api/system/user";
import Treeselect from '@riophae/vue-treeselect'
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {
    name: "ReportUseGas",
    components: { Treeselect },
    dicts: ["customer_type"],
    data() {
        return {
            // 片区树选项
            areaOptions: undefined,
            headList: [
                // {
                //     name: '片区',
                //     value: '',
                //     url: require('../../assets/icons/are.png')
                // },
                {
                    name: '合计用气金额(元)',
                    value: '0',
                    url: require('../../assets/icons/shishou.png')
                },
                {
                    name: '合计用气量(m3)',
                    value: '0',
                    url: require('../../assets/icons/yongqi.png')
                },
            ],
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 小区表格数据
            userList: null,
            // 弹出层标题
            title: "",
            //表计弹出层标题
            title2: "",
            // 企业树选项
            deptOptions: undefined,
            // 企业名称
            deptName: undefined,
            // 表单参数
            form: {},
            defaultProps: {
                children: "children",
                label: "label",
            },
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                userName: undefined,
                phonenumber: undefined,
                status: undefined,
                deptId: undefined,
            },

            activeName: "1",
            tableData: [],

            value2: "",
            radio: 1,
            value3: "",

        };
    },
    watch: {
        // 根据名称筛选企业树
        deptName(val) {
            this.$refs.tree.filter(val);
        },
    },
    created() {
        this.getList();
        this.getDeptTree();
        this.getDeptTree1()
        this.getAll()
    },
    methods: {
        /** 查询企业下拉树结构 */
        getDeptTree1() {
            areaTreeList().then((response) => {
                this.areaOptions = response.data;
            });
        },
        // 搜索框时间改变
        serchTime(val) {
            console.log(val, 222222)
            this.$set(this.queryParams, 'openDate', val)
            this.$set(this.queryParams, 'startTime', val[0])
            this.$set(this.queryParams, 'endTIme', val[1])
        },
        // 统计获取
        getAll() {
            let obj = JSON.parse(JSON.stringify(this.queryParams))
            delete obj.openDate
            delete obj.pageNum
            delete obj.pageSize
            useGasListAll(obj).then((item) => {
                this.headList.map((res) => {
                    if (res.name == '合计用气金额(元)') {
                        res.value = item.data.useAmount
                    } else if (res.name == '合计用气量(m3)') {
                        res.value = item.data.useGas
                    }
                })
            })
        },
        handleSelectionChange() { },
        /** 查询小区列表 */
        getList() {
            this.loading = true;
            let obj = JSON.parse(JSON.stringify(this.queryParams))
            delete obj.openDate
            useGasList(obj).then((response) => {
                this.userList = response.rows;
                this.total = response.total;
                this.loading = false;
            });
        },
        /** 查询企业下拉树结构 */
        getDeptTree() {
            deptTreeSelect().then((response) => {
                this.deptOptions = response.data;
            });
        },
        // 筛选节点
        filterNode(value, data) {
            if (!value) return true;
            return data.label.indexOf(value) !== -1;
        },
        // 节点单击事件
        handleNodeClick(data) {
            this.queryParams.areaId = data.id;
            this.handleQuery();
            this.getAll()
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
            this.getAll()
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");
            this.queryParams.pageNum = 1;
            this.queryParams.pageSize = 10;
            this.$set(this.queryParams, 'startTime', null)
            this.$set(this.queryParams, 'endTIme', null)
            this.queryParams.areaId = undefined;
            this.$refs.tree.setCurrentKey(null);
            this.handleQuery();
        },
        /** 导出按钮操作 */
        handleExport() {
            this.download(
                "system/meter/read/export",
                {
                    ...this.queryParams,
                },
                `user_${new Date().getTime()}.xlsx`
            );
        },
    },
};
</script>
<style lang="scss" scoped>
.head-containers {
    width: 200px;
    overflow: auto;

    .el-tree {
        min-width: 100%;
        display: inline-block !important;
    }
}

.tablex {
    width: 100%;
    border-collapse: collapse;
    border-color: #ebeef5;

    td {
        width: 25%;
        padding: 10px;
        color: #606266;
        font-size: 14px;
    }

    .lables {
        background: rgba(150, 154, 184, 0.05);
        text-align: right;
    }
}

.head_box {
    width: 100%;
    height: 60px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;

    .head_box_value {
        width: 30%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-bottom: 10px;

        .head_box_img {
            display: inline-block;
            width: 25px;
            height: 25px;
            margin-right: 15px;
        }
    }
}
</style>
